<template>
    <div class="home-top">
    <h3>人气推荐</h3>
    <div class="content">
    <van-card
    v-for="item in goodsList"
    :key="item.id"
    :tag="item.tag"
    :price="item.retail_price"
    :origin-price="item.origin_price"
    :desc="item.goods_brief"
    :title="item.name"
    :thumb="item.list_pic_url"
    >
    </van-card>
    </div>
</div>
</template>
<script setup>
const goodsList = [
 {
 retail_price: '888.00',
 name: '正品手办',
 goods_brief: '一级手办，高级、可爱、帅气',
 list_pic_url: '/images/top1.jpg',
 tag: 'TOP1'
 },
 {
 retail_price: '88.00',
 origin_price: '98.00',
 name: '小黄人手办',
 goods_brief: '安全、无毒、爸妈放心',
 list_pic_url: '/images/top2.jpg',
 tag: 'TOP2'
 },
 {
 retail_price: '128.00',
 origin_price: '168.00',
 name: '圣诞版小黄人',
 goods_brief: '可爱、高冷、180、正品',
 list_pic_url: '/images/top3.jpg',
 tag: 'TOP3'
 },
 {
 retail_price: '199.00',
 origin_price: '205.00',
 name: '正品手办',
 goods_brief: '无甲醛 无毒 孩子收藏更放心',
 list_pic_url: '/images/top4.jpg',
 tag: 'TOP4'
 },
 {
 retail_price: '89.00', origin_price: '99.00',
 name: '正品手办',
 goods_brief: '摆放着可好看了',
 list_pic_url: '/images/top5.jpg',
 tag: 'TOP5'
 } ]
</script>
<style lang="less" scoped>
.home-top {
h3 {
font-size: 22px;
line-height: 30px;
text-align: center;
margin: 0.5rem 0;
}
.content {
--van-tag-primary-color: #FF8000;
--van-card-font-size: 16px;
--van-card-background: #f9f9f9;
background: var(--van-card-background);
:deep(.van-card) {
margin-top: 0;
.van-card__title {
padding: 10px 0 5px;
}
.van-card__price-currency {
font-size: var(--van-card-font-size);
} }
&::after {
content: '';
display: block;
height: 3rem;
}
 } 
}
</style>